<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="multipart/form-data" charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Home</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="assets/layer/layer/theme/default/layer.css"/>
    <link rel="stylesheet" href="angularjs/pagination.css">
    <script src="../homePage/js/jquery-1.9.1/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="layer/layer.js"></script>
    <script src="angularjs/angular.min.js"></script>
    <script src="angularjs/pagination.js"></script>
</head>
<style type="text/css">
    .setName {
        height: 34px;
        line-height: 34px;
        width: 172px;
        border: #dddddd 1px solid;
    }

    .setName:hover {
        border: #ff7676 1px solid;
    }
</style>
<script>
    //获取登录的管理员 ID,作为勘查人id
    var surveyorid = JSON.parse(sessionStorage.getItem("admin")).userid;
    //显示用户名
    var name = JSON.parse(sessionStorage.getItem("admin")).username;
    //报案号
    var reportid;
    //绑定angel实例
    var app = angular.module("myApp", ['pagination']);
    app.controller("myCtrl", function ($scope, $http) {
        //分页参数
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 2,
            totalItems: 100,
            perPageOptions: [2, 10, 20,50,100],
            onChange: function () {
                //开始调用分页请求(有条件的)
                $scope.searchName($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
                // $scope.page($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
            }
        }
        //默认分页
        $scope.getHasSent = function () {
            $http.get("http://localhost:9001/report/getHasSent/" + surveyorid).success(function (data) {
                $scope.list = data.data.rows;
                // $scope.paginationConf.totalItems = data.data.total;  //更新总记录数
                $("#theuser").html(name);
                $("#loginName").html(name);
            });
        }
        //默认分页
        $scope.page = function (pageIndex, pageSize) {
            $http.get("http://localhost:9001/report/page/" + pageIndex + "/" + pageSize + "/" + surveyorid).success(function (data) {
                $scope.list = data.rows;
                $scope.paginationConf.totalItems = data.total;  //更新总记录数
                $("#theuser").html(name);
                $("#loginName").html(name);
            });
        }
        //勘查模态框
        $scope.survey = function (rid) {
            $("#rid").text(rid);
            reportid = rid;
            $("#myModal").modal("show");
        }
        //闪赔模态框
        $scope.QuickPass = function (rid) {
            $("#reportId").html(rid);
            reportid = rid;
            $("#sModal").modal("show");
        }
        //报案人查询+分页处理
        $scope.searchName = function (pageIndex, pageSize) {
            var tUser = {
                username: $scope.rname,
            };
            $http.post("http://localhost:9001/report/searchName?pageIndex=" + pageIndex + "&pageSize=" + pageSize, tUser)
                .success(function (data) {
                    if (data.rows.length > 0) {
                        $scope.list = data.rows;
                        $scope.paginationConf.totalItems = data.total;
                    } else {
                        $scope.list = "";
                        $scope.paginationConf.totalItems = data.total;
                        layer.msg("没有数据");
                    }
                })
        }
        $scope.search = function () {
            if ($scope.rname === "") {
                layer.msg("请填写查询内容");
                return;
            }
            $scope.searchName(1, $scope.paginationConf.itemsPerPage);
        }
    });

    //勘查提交
    function save() {
        index = layer.load(1);
        var img = new FormData();
        var remark = $("#remark").val();
        img.append("img", $("#img").get(0).files[0]);
        $.ajax({
            url: "http://localhost:9001/report/upload/" + reportid + "/" + remark,
            type: "POST",
            data: img,
            processData: false,
            contentType: false,
            success: function (data) {
                layer.close(index);
                layer.msg(data.msg);
                $("#remark").val("");
                $("myModal").modal("hide");
                window.location.reload()//刷新当前页面
                // $("#img").val("");
            },
            error: function () {
                layer.close(index);
                alert("请上传清晰图片,并填写备注");
            }
        });
    }

    //闪赔提交
    function shanPei() {
        var file1 = new FormData();
        file1.append("files", $("#file1").get(0).files[0]);
        file1.append("files", $("#file2").get(0).files[0]);
        var money = $("#money").val();
        if ($("#file1").val() === "") {
            layer.msg("请选择车损图片!");
            return;
        }
        if ($("#file2").val() === "") {
            layer.msg("请选择闪赔签字图片!");
            return;
        }
        if (money > 5000) {
            layer.msg("闪赔需满足5000元以下的理赔金额申请要求");
            return;
        }

        $.ajax({
            cache: false,
            url: "http://localhost:9001/report/sanPei/" + reportid + "/" + money,
            method: 'post',
            data: file1,
            contentType: false,
            processData: false,
            success: function (data) {
                layer.msg(data.msg);
                $("#sModal").modal("hide");
                $("#money").val("");
                window.location.reload()//刷新当前页面
            },
            error: function () {
                layer.msg("请填写完整的闪赔申请信息");
            }
        });
    }
</script>

<body>
<div class="wrapper">
    <div class="main-header">
        <div class="logo-header">
            <a href="home.html" class="logo">
                <img src="../pay/img/logo.png" style="height: 40px;width: 100px"> 勘查部
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse"
                    aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg" style="float: right;margin-bottom: 0px !important;">
            <div class="container-fluid">
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <span id="theuser">用户名</span>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <div class="user-box">

                                    <div class="u-text">
                                        <span id="loginName">用户名</span>
                                        <p class="text-muted"></p>
                                        <a onclick="quiet()" class="btn btn-rounded btn-danger btn-sm">退出登录</a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <ul class="nav">
                <li class="nav-item active">
                    <a href="home.html">
                        <i class="la la-dashboard"></i>
                        <p>待勘查报案单</p>
                        <!-- <span class="badge badge-count">5</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="lossAssessment.html">
                        <i class="la la-fonticons"></i>
                        <p>案件定损</p>
                        <!-- <span class="badge badge-count">5</span> -->
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-panel" ng-app="myApp" ng-controller="myCtrl" ng-init="getHasSent()">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header panel-info">
                                <h4 class="card-title">待勘查报案表</h4>
                                <div style="margin-top: 8px">
                                    <input class="setName" ng-model="rname" type="text" placeholder="报案人..."/>
                                    <button class="btn btn-info" ng-click="search()" type="button">查询</button>
                                </div>
                            </div>
                            <div class="card-body">
                                <table class="table table-bordered table-hover table-striped text-center">
                                    <tr>
                                        <td>序号</td>
                                        <td>报案号</td>
                                        <td>保单号</td>
                                        <td>报案人</td>
                                        <td>报案时间</td>
                                        <td>处理状态</td>
                                        <td>联系电话</td>
                                        <td>操作</td>
                                    </tr>
                                    <tr ng-repeat="l in list">
                                        <td ng-bind="$index+1"></td>
                                        <td>{{l.reportid}}</td>
                                        <td>{{l.policynum}}</td>
                                        <td>{{l.tUser.username}}</td>
                                        <td>{{l.reporttime | date:'yyyy-MM-dd'}}</td>
                                        <td>{{l.reportstate}}</td>
                                        <td>{{l.reportertel}}</td>
                                        <td>
                                            <button ng-click="survey(l.reportid)" type="button" class="btn btn-info">
                                                填写勘查表
                                            </button>
                                            <button ng-click="QuickPass(l.reportid)" class="btn btn-info" type="button">
                                                闪赔
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="8">
                                            <span style="font-size:25px;color: #8c8c8c;text-align: center"> {{message}}</span></br>
                                            <!--自动分页的标签！！！-->
                                            <span style="height: 10px;text-align: center"
                                                  class="pagination pagination-centered">
                                                        <tm-pagination style="position: relative;top:-31px"
                                                                       conf="paginationConf"></tm-pagination>
                                        </span>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（勘查） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" style="margin-top: 150px">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="myModalLabel">勘查报表</h6>
                </div>
                <form class="form-horizontal" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="form-group">
                            <span>报案号:</span><span id="rid"></span>
                        </div>
                        <div class="form-group">
                            <p>上传车损清晰照片:</p>
                            <input class="form-control btn btn-default" type="file" id="img" name="img"
                                   accept="image/png,image/jpeg,image/jpg"/>
                        </div>
                        <div class="form-group">
                            <p>填写备注:</p>
                            <TEXTAREA id="remark" class="form-control" placeholder="备注信息..."></TEXTAREA>
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <button onclick="save();" class="btn btn-default">确认提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框（闪赔） -->
    <div class="modal fade" id="sModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" style="margin-top: 150px">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="ModalLabel">闪赔报表</h6>
                </div>
                <!--                -->
                <form class="form-horizontal" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="form-group">
                            <span>报案号:</span><span id="reportId"></span>
                        </div>
                        <div class="form-group">
                            <p>上传车损清晰照片:</p>
                            <input class="form-control btn btn-default" type="file" id="file1"
                                   accept="image/png,image/jpeg,image/jpg"/>
                        </div>
                        <div class="form-group">
                            <p>签字证明:<span style="font-size: 10px;color: #ac2925">(勘察人员与报案人员的签字证明)</span></p>
                            <input class="form-control btn btn-default" type="file" id="file2"
                                   accept="image/png,image/jpeg,image/jpg"/>
                        </div>
                        <p style="color: red">上传文件不能超过4M否则上传失败</p>
                        <div class="form-group">
                            <p>协商理赔金额:</p>
                            <input class="form-control" id="money" placeholder="理赔金额..."/>
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="shanPei()">确认提交</button>
                    <button type="button" class="btn btn-warning" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<!--	<script src="assets/js/demo.js"></script>-->
</html>

